<template>
    <div class="container">
        <div class="echarts" ref="main"></div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            month: [],//月份
            harvest: [],//收成
        }
    },
    methods: {
        //请求数据
        requestHar() {
            this.$axios.get('/api/plantingHarvest').then(res => {
                // console.log(res);
                if (res.status === 200) {
                    this.month = res.data.map(item => item.month)
                    this.harvest = res.data.map(item => item.harvest)
                }
                //设置配置项
                this.option = {
                    title: {
                        text: '全国种植每月收成情况',  //主标题
                        left: 15,
                        top: 30
                    },
                    grid: {
                        left: '17%',
                        top: '27%',
                        right: '20%',
                        bottom: '12%'
                    },
                    xAxis: { //x轴
                        type: 'category',  //类目
                        data: this.month
                    },
                    yAxis: {  //y轴
                        type: 'value',
                        axisLine: { show: true }
                    },
                    tooltip: {
                        show: true
                    },
                    axisPointer: {
                        show: true,
                        type: 'shadow'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: { show: true },
                            dataView: { show: true },
                            restore: { show: true },
                            magicType: {
                                show: true,
                                type: ['line', 'bar']
                            }
                        }
                    },
                    series: { //图标数据配置
                        type: 'bar',
                        data: this.harvest,
                        label: {  //图形上的文本标签
                            show: true,
                            position: 'top',
                            color: '#36bde3',
                            fontSize: 13,
                            fontWeight: 700
                        },
                        itemStyle: {  //渐变色或者纹理填充
                            opacity: 0.7,  //透明度
                            borderRadius: [50, 50, 0, 0],  //圆角半径
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#123e62' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#36bde3' // 100% 处的颜色
                                }],
                            }
                        },
                        emphasis: {  //折线图的高亮状态。
                            itemStyle: {
                                opacity: 1,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'red' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'green' // 100% 处的颜色
                                    }],
                                }
                            }
                        }
                    }
                }

                //3.使用echarts实列设置配置项
                this.myEschars.setOption(this.option)
            })
        },
        screen() {
            this.myEschars.resize();
            let width = this.$refs.main.offsetWidth
            let num = width / 100 * 6;
            this.option = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                }
            }
            //3.使用echarts实列设置配置项
            this.myEschars.setOption(this.option)
        },
        init() {
            //1.获取res节点
            const oDiv = this.$refs.main;
            //2.创建echarts实列
            this.myEschars = this.$echarts.init(oDiv, this.theme);
        }
    },
    mounted() {
        this.init()
        //发起全国种植每月收成情况请求
        this.requestHar();

        // 添加window的监听事件
        window.addEventListener('resize', this.screen)
    },
    destroyed() {
        //移除window的监听事件
        window.removeEventListener('resize', this.screen)
    },
    watch: {
        theme() {
            //销毁之前的echarts实列
            this.myEschars.dispose()
            this.init()
            this.requestHar();
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>